<template>
	<view class="detail">
		<view class="head">
			<u-avatar :src="detailData.uAvatar" mode="circle"></u-avatar>
			<view class="name_grade_createtime">
				<view class="name_grade">
					<text v-if="detailData.sName !== null">{{detailData.sName}}</text>
					<text v-else>{{detailData.uName}}</text>
					<text>Lv{{detailData.uGrade}}</text>
				</view>
				<view class="time">{{detailData.dCreatetime}}</view>
			</view>
			<view class="set_up">
				<text>关注</text>
			</view>
		</view>
		
		<view class="comment">
			<view class="comment-text">
				{{detailData.dContent}}
			</view>
			<view class="comment-picture">
				<image class="image" @click="imgListPreview(item)" v-for="item,index in detailData.dPicture" :key="index" :src="item"></image>
			</view>
			<u-popup width="100%" height="80%" v-model="operate.imgShow" mode="center">
				<image class="img-height" :src="operate.amplifyImg"></image>
			</u-popup>
		</view>	
		<view class="discuss">
			<view class="discuss-title">
				评论区
			</view>
			<view v-if="subComment.length !== 0" class="discuss-item" v-for="item,index in subComment" :key="index">
				<view class="discuss-item-list">
					<u-avatar :src="item.uAvatar"></u-avatar>
					<view class="">
						<view class="discuss-item-name">
							{{item.uName}}
							<text class="text">Lv{{item.uGrade}}</text>
						</view>
						<view class="discuss-item-time">
							{{item.dCreatetime}}
						</view>
					</view>
					<view class="discuss-item-list-like">
						<u-icon v-if="item.a === 0" @click="handleItemA(item)" name="thumb-up" size="40"></u-icon>
						<u-icon v-else name="thumb-up-fill" @click="handleItemA(item)" size="40"></u-icon>
						<view class="num">{{item.dFavorite}}</view>
					</view>
				</view>
				<view class="discuss-item-content">
					{{item.dContent}}
				</view>
			</view>
			<u-empty class="empty" v-if="subComment.length === 0" text="空空如也" mode="list"></u-empty>
		</view>
		
		<view class="operate">
			<view class="operate-icon thumb-up" @click="userLike">
				<u-icon v-if="operate.like === true" @click="operate.like = false" name="thumb-up" size="40"></u-icon>
				<u-icon v-else name="thumb-up-fill" @click="operate.like = true" size="40"></u-icon>
				<text>{{detailData.dFavorite}}</text>
			</view>
			<view class="operate-icon thumb-down" @click="userDislike">
				<u-icon v-if="operate.dislike === true" @click="operate.dislike = false" name="thumb-down" size="40"></u-icon>
				<u-icon v-else name="thumb-down-fill" @click="operate.dislike = true" size="40"></u-icon>
				<text>{{detailData.dDislike}}</text>
			</view>
			<view class="operate-icon chat">
				<u-icon @click="confirm" name="chat" size="40"></u-icon>
			</view>
			<view class="operate-icon zhuanfa">
				<u-icon name="zhuanfa" size="40"></u-icon>
			</view>
		</view>
		
		<u-popup v-model="operate.show" mode="bottom"  border-radius="14">
			<view class="u-popup">
				<view class="cancel" @click="operate.show = false">
					取消
				</view>
				<view>
					回复
				</view>
				<view class="confirm" @click="issue">
					确认
				</view>
			</view>
			<u-input class="input" v-model="form.dContent" type="text" :disabled="operate.disabled" :border="true" />
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() 
		{
			return {
				detailData:{},
				subComment:[],
				uid:'',
				did:0,
				midPid:0, 
				operate:{
					like: true,
					dislike: true,
					show: false,
					disabled: false,
					imgShow: false,
					amplifyImg: ''
				},
				form:{
					dContent:'',
					dPid:0,
					dUid:'',
					dFavorite:0
				}
			}
		},
		async onLoad(val) 
		{
			this.form.dPid = val.id
			this.midPid = val.id
			this.form.dUid = this.vuex_token.openid
			this.getDetail(val)
			this.getDetailSubComment(val)
			let res = await this.$u.api.getLike({lUid:this.vuex_token.openid,lDid:val.id,lType:"1"})
			if(res)
				this.operate.like = false
			else
				this.operate.like = true
				
			res = await this.$u.api.getLike({lUid:this.vuex_token.openid,lDid:val.id,lType:"-1"})
			if(res)
				this.operate.dislike = false
			else
				this.operate.dislike = true
				
			res = await this.$u.api.getLike({lUid:this.vuex_token.openid,lType:"0",lTempid:this.midPid})
			console.log(res);
			
			/**
			 * 添加用户喜好
			 * 查询食物附加数据，插入用户附件数据
			 */
			//准备映射数组
			let tempArr = []
			//食物附加数据
			res = await this.$u.api.getFoodData(val)
			console.log(res[0]);
			// 修改数据库表前缀
			for (let val in res[0])
			{
				if(res[0][val] !== null && res[0][val] !== 0 && res[0][val] !== '')
					if(val !== 'tId' && val !== 'tPid')
					{
						//替换前缀
						val = val.replace("t","b")
						tempArr.push(val)
					}
			}
			// console.log(tempArr);
			//用户附加数据
			let userData = await this.$u.api.getUserFood({id:this.vuex_token.openid})
			// console.log('前',userData);
			for (let i in userData) 
			{
				for (let j = 0; j < tempArr.length; j++) 
				{
					if(i === tempArr[j])
					{
						++userData[i] //食物类型加1
					}
				}
			}
			//删除bId做为params
			delete userData.bId
			//更改用户喜好信息
			await this.$u.api.updUserlike(userData)
			// console.log('后',userData);
		},
		methods: {
			async getDetail(val)
			{
				let res = await this.$u.api.getDetailDiscuss(val)
				this.detailData = res
				this.detailData.dPicture = this.detailData.dPicture.split(",")
				console.log(this.detailData.dId);
				this.did = this.detailData.dId
				this.uid = this.detailData.uId
				console.log(res);
			},
			async getDetailSubComment(val)
			{
				let params = {pid:val.id}
				let res = await this.$u.api.getDiscussSubComment(params)
				this.subComment = res
				//使用Vue.set方法添加被监视的对象属性，否则无法数据更改后无法在DOM中跟新
				this.subComment.forEach(item => {this.$set(item,'a',0)})
			},
			imgListPreview(val)
			{
				this.operate.imgShow = true
				this.operate.amplifyImg = val
				console.log(this.operate.amplifyImg);
			},
			confirm()
			{
				if(!this.vuex_token)
				{
					this.$u.toast('请登录')
					setTimeout(() => {
						this.$u.route({
							type: 'redirect',
							url: '/pages/center/index'
						})
					}, 2000)
				}
				else
				{
					this.operate.show = true
				}	
			},
			async handleItemA(val)
			{
				let params = {
					lUid:this.vuex_token.openid,
					lDid:val.dId
				}
				let res = await this.$u.api.getLike(params)

				if(res)// 查到说明有过赞
				{
					//取消点赞
					await this.$u.api.calLike({lUid:res.lId})
					await this.$u.api.subDiscussLike({id:res.lDid})
				}
				else //没有赞过
				{
					//点赞
					let res1 = await this.$u.api.addLike({lUid:this.vuex_token.openid,lDid:val.dId,lType:"0",lTempid:this.midPid})
					await this.$u.api.addDiscussLike({id:val.dId})
				}
				
				this.subComment.forEach(item => {
					if(item.dId === val.dId)
					{
						let params = {
							id:item.dId
						}
						console.log(params);
						if(item.a === 0)
						{
							item.a = 1
							item.dFavorite++
							// this.$u.api.addLike(params)
						}
						else
						{
							item.a = 0
							item.dFavorite--
							// this.$u.api.subLike(params)
						}
						
					}
				})
			},
			issue()
			{
				this.operate.show = false
				let res = this.$u.api.intUpdDiscuss(this.form)
				this.getDetailSubComment(this.form.dPid)
				this.$u.toast('发表成功')
			},
			async userLike()
			{
				let params = {
					lUid:this.vuex_token.openid,
					lDid:this.form.dPid,
					lType:"1"
				}
				//找出点赞的id
				let res = await this.$u.api.getLike(params)
				console.log(res);
				if(res)
				{
					//修改点赞表
					await this.$u.api.calLike({lUid:res.lId})
					await this.$u.api.subDiscussLike({id:this.did})
					//修改该评论的前端实时点赞数
					this.detailData.dFavorite--
				}
				else
				{
					//增加发表该点评的用户点赞数
					await this.$u.api.addUserLike({uId:this.uid})
					let res1 = await this.$u.api.addLike({lUid:this.vuex_token.openid,lDid:this.did,lType:"1"})
					await this.$u.api.addDiscussLike({id:this.did})
					//修改该评论的前端实时点赞数
					this.detailData.dFavorite++
				}
			},
			async userDislike()
			{
				let params = {
					lUid:this.vuex_token.openid,
					lDid:this.form.dPid,
					lType:"-1"
				}
				//找出点赞的id
				let res = await this.$u.api.getLike(params)
				console.log(res);
				if(res)
				{ 
					//修改点赞表
					await this.$u.api.calLike({lUid:res.lId})
					await this.$u.api.subDiscussDislike({id:this.did})
					
					//增加该评论的点赞数
					this.detailData.dDislike--
				}
				else
				{
					//增加发表该点评的用户点赞数
					await this.$u.api.addUserLike({uId:this.uid})
					let res1 = await this.$u.api.addLike({lUid:this.vuex_token.openid,lDid:this.did,lType:"-1"})
					await this.$u.api.addDiscussDislike({id:this.did})
					this.detailData.dDislike++
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/pages/detail/detail.scss";
	.odd
	{
		background: none !important;
	}
	.img-height
	{
		width: 100%;
		height: 100%;
	}
</style>
